/*
         注册页面
          1. 拿到所有注册信息 发送给后端  后端返回你注册成功或者失败  
             拿到所有注册信息
                + 判断用户名是否重复
                + 判断手机号是否被注册 
                + 判断密码是否相等
             验证 是否能够注册   

        */
class Register {
    constructor() {
        this.phone = document.querySelector('#recipient-phone')
        this.user = document.querySelector('#recipient-name')
        this.password = document.querySelector('#message-password')
        this.checkpassword = document.querySelector('#message-checkpassword')
        this.register = document.querySelector('.register')
        this.phone_span = document.querySelector('.phone_span')
        this.user_span = document.querySelector('.user_span')
        this.password_span = document.querySelector('.password_span')
        this.checkpassword_span = document.querySelector('.checkpassword_span')
        this.agreeBtn = document.querySelector('.agreeBtn')
        this.showname = false
        this.showphone = false
        this.reg1 = /^1[3-9][0-9]{9}$/
        this.reg2 = /^[\u2E80-\u9FFF]+$/
        this.reg3 = /^[a-zA-Z0-9_]{6,16}$/
        this.handleRegister()
        this.checkPhone()
        this.checkUsername()
        this.onBlur()
    }
    //注册
    handleRegister() {
        // console.log(reg1);

        this.register.onclick = () => {
            if (!this.phone.value || !this.user.value || !this.password.value || !this.checkpassword
                .value) {
                alert('请填写所有信息！')
                return
            }
            if (this.password.value != this.checkpassword.value) {
                // alert('密码不一致')
                this.checkpassword_span.innerHTML = '密码不一致'
                return
            }
            if (!this.agreeBtn.checked) {
                alert('请勾选协议')
                return
            }
            let obj = {
                phone: this.phone.value,
                username: this.user.value,
                password: this.password.value,
                checkpassword: this.checkpassword.value,


            }
            console.log(this.showname, this.showphone);
            if (!this.showname && !this.showphone) {
                let flag = this.reg1.test(this.phone.value) == true && this.reg2.test(this.user
                        .value) ==
                    true && this.reg3.test(this.password.value) == true
                if (flag) {
                    let arr = this.getRegisterInfo()
                    arr.push(obj)
                    localStorage.setItem('info', JSON.stringify(arr))
                    this.phone.value = ''
                    this.user.value = ''
                    this.password.value = ''
                    this.checkpassword.value = ''
                        alert('注册成功，即将跳转登录页面')
                    setTimeout(() => {
                        location.href = './login.html'
                    }, 2000)
        
                    
                }
            } else {
                alert('注册信息有误')
                return
            }
            
        }


    }
    onBlur() {

        this.phone.onblur = () => {
            if (this.phone.value == '') {
                this.phone_span.className = 'false'
                this.phone_span.innerHTML = '手机号不能为空'
                return false
            } else if (this.reg1.test(this.phone.value)) {
                this.phone_span.className = 'true'
                this.phone_span.innerHTML = '√'
                return true
            } else {
                this.phone_span.className = 'false'
                this.phone_span.innerHTML = '手机号不正确'
                return false
            }
        }
        this.user.onblur = () => {
            if (this.user.value == '') {
                this.user_span.className = 'false'
                this.user_span.innerHTML = '用户名不能为空'
                return false
            } else if (this.reg2.test(this.user.value)) {
                this.user_span.className = 'true'
                this.user_span.innerHTML = '√'
                return true
            } else {
                this.user_span.className = 'false'
                this.user_span.innerHTML = '用户名不正确'
                return false
            }
        }
        this.password.onblur = () => {
            if (this.password.value == '') {
                this.password_span.className = 'false'
                this.password_span.innerHTML = '密码不能为空'
                return false
            } else if (this.reg3.test(this.password.value)) {
                this.password_span.className = 'true'
                this.password_span.innerHTML = '√'
                return true
            } else {
                this.password_span.className = 'false'
                this.password_span.innerHTML = '密码不正确'
                return false
            }
        }
        this.checkpassword.onblur = () => {
            if (this.checkpassword.value == '') {
                this.checkpassword_span.className = 'false'
                this.checkpassword_span.innerHTML = '密码不能为空'
                return false
            } else if (this.checkpassword.value == this.password.value) {
                this.checkpassword_span.className = 'true'
                this.checkpassword_span.innerHTML = '√'
                return true
            } else {
                this.checkpassword_span.className = 'false'
                this.checkpassword_span.innerHTML = '密码不正确'
                return false
            }
        }
    }
    //获取注册表信息
    getRegisterInfo() {
        return JSON.parse(localStorage.getItem('info')) || []
    }
    //验证手机号码是否重复
    checkPhone() {
        this.phone.addEventListener('blur', () => {
            let arr = this.getRegisterInfo()
            if (arr.length > 0) {
                let res = arr.some((res) => {
                    return res.phone == this.phone.value
                })
                console.log(res);
                this.showphone = res
                if (res) {
                    alert('该手机号已被注册')
                } else {
                    this.phone_span.innerHTML = ''
                }
            }
            console.log(this.phone.value);
        })

    }
    //验证用户名是否重复
    checkUsername() {
        this.user.addEventListener('blur', () => {
            let arr = this.getRegisterInfo()
            if (arr.length > 0) {
                let res = arr.some((res) => {
                    return res.username == this.user.value
                })
                this.showname = res
                if (res) {
                    alert('该用户名已被注册')
                } else {
                    this.user_span.innerHTML = ''
                }
            }
        })
    }

}
new Register()